<template>
  <div class="info-extraction-container">
    <!-- 页面头部 -->
    <div class="page-header">
      <h2>论文信息提取</h2>
      <p>使用AI技术自动提取论文的关键信息</p>
    </div>

    <el-row :gutter="24">
      <!-- 文件上传和配置 -->
      <el-col :lg="16" :md="18" :sm="24">
        <el-card class="upload-card" shadow="hover">
          <template #header>
            <div class="card-header">
              <el-icon size="20" color="#409EFF">
                <UploadFilled />
              </el-icon>
              <span>上传论文文件</span>
            </div>
          </template>

          <FileUpload
            v-model="uploadedFiles"
            :limit="1"
            :accept="['.pdf']"
            :max-size="30 * 1024 * 1024"
            :auto-upload="false"
            upload-text="点击或拖拽PDF文件到此区域"
            hint-text="支持PDF格式，文件大小不超过30MB"
            @success="handleUploadSuccess"
          />
        </el-card>

        <!-- 提取配置 -->
        <el-card v-if="uploadedFiles.length > 0" class="config-card" shadow="hover">
          <template #header>
            <div class="card-header">
              <el-icon size="20" color="#67C23A">
                <Setting />
              </el-icon>
              <span>提取配置</span>
            </div>
          </template>

          <el-form :model="extractConfig" label-width="120px">
            <el-form-item label="提取内容">
              <el-checkbox-group v-model="extractConfig.options">
                <el-checkbox label="basicInfo">基本信息</el-checkbox>
                <el-checkbox label="keywords">关键词</el-checkbox>
                <el-checkbox label="abstract">摘要</el-checkbox>
                <el-checkbox label="references">参考文献</el-checkbox>
              </el-checkbox-group>
            </el-form-item>

            <el-form-item>
              <el-button
                type="primary"
                size="large"
                :loading="extracting"
                :disabled="!uploadedFiles.length || extractConfig.options.length === 0"
                @click="startExtraction"
              >
                <el-icon><Star /></el-icon>
                {{ extracting ? '提取中...' : '开始提取' }}
              </el-button>
              
              <!-- 单独提取按钮 -->
              <el-button-group v-if="extractResult" class="single-extract-buttons">
                <el-button
                  v-if="shouldShowItem('basicInfo')"
                  type="success"
                  size="small"
                  :loading="singleExtracting"
                  @click="extractSingle('basicInfo')"
                >
                  <el-icon><Refresh /></el-icon>
                  重新提取基本信息
                </el-button>
                <el-button
                  v-if="shouldShowItem('keywords')"
                  type="warning"
                  size="small"
                  :loading="singleExtracting"
                  @click="extractSingle('keywords')"
                >
                  <el-icon><Refresh /></el-icon>
                  重新提取关键词
                </el-button>
                <el-button
                  v-if="shouldShowItem('abstract')"
                  type="info"
                  size="small"
                  :loading="singleExtracting"
                  @click="extractSingle('abstract')"
                >
                  <el-icon><Refresh /></el-icon>
                  重新提取摘要
                </el-button>
                <el-button
                  v-if="shouldShowItem('references')"
                  type="danger"
                  size="small"
                  :loading="singleExtracting"
                  @click="extractSingle('references')"
                >
                  <el-icon><Refresh /></el-icon>
                  重新提取参考文献
                </el-button>
              </el-button-group>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>

      <!-- 提取说明 -->
      <el-col :lg="8" :md="6" :sm="24">
        <el-card class="info-card" shadow="hover">
          <template #header>
            <div class="card-header">
              <el-icon size="20" color="#E6A23C">
                <InfoFilled />
              </el-icon>
              <span>功能说明</span>
            </div>
          </template>

          <div class="info-content">
            <el-alert
              title="AI智能提取"
              type="info"
              :closable="false"
              show-icon
            />

            <div class="feature-list">
              <div class="feature-item">
                <el-icon color="#409EFF"><User /></el-icon>
                <span>自动识别作者信息</span>
              </div>
              <div class="feature-item">
                <el-icon color="#67C23A"><Key /></el-icon>
                <span>智能提取关键词</span>
              </div>
              <div class="feature-item">
                <el-icon color="#E6A23C"><Document /></el-icon>
                <span>摘要内容分析</span>
              </div>
              <div class="feature-item">
                <el-icon color="#F56C6C"><Collection /></el-icon>
                <span>参考文献整理</span>
              </div>
            </div>

            <!-- 当前选择提示 -->
            <div v-if="extractConfig.options.length > 0" class="selection-hint">
              <el-divider />
              <div class="hint-content">
                <el-icon color="#409EFF"><InfoFilled /></el-icon>
                <span>当前选择：{{ getSelectedOptionsText }}</span>
              </div>
              <p class="hint-desc">仅展示已选择内容的提取结果</p>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 提取结果 -->
    <div v-if="extractResult" class="result-section">
      <!-- 基本信息 -->
      <el-card 
        v-if="shouldShowItem('basicInfo') && extractResult.basicInfo" 
        class="basic-info-card" 
        shadow="hover"
      >
        <template #header>
          <div class="card-header">
            <el-icon size="20" color="#409EFF">
              <User />
            </el-icon>
            <span>基本信息</span>
            <el-button
              type="text"
              size="small"
              @click="extractSingle('basicInfo')"
            >
              <el-icon><Refresh /></el-icon>
              重新提取
            </el-button>
          </div>
        </template>

        <div class="basic-info-grid">
          <div class="info-item">
            <label>论文标题：</label>
            <span>{{ extractResult.basicInfo.title || '未识别到标题' }}</span>
          </div>
          <div class="info-item">
            <label>作者姓名：</label>
            <span>{{ extractResult.basicInfo.author || '未识别到作者' }}</span>
          </div>
          <div class="info-item">
            <label>学号：</label>
            <span>{{ extractResult.basicInfo.studentId || '未识别到学号' }}</span>
          </div>
          <div class="info-item">
            <label>专业班级：</label>
            <span>{{ extractResult.basicInfo.major || '未知专业' }} - {{ extractResult.basicInfo.className || '未知班级' }}</span>
          </div>
          <div class="info-item">
            <label>指导教师：</label>
            <span>{{ extractResult.basicInfo.supervisor || '未识别到指导教师' }}</span>
          </div>
          <div class="info-item">
            <label>字数统计：</label>
            <span>{{ (extractResult.basicInfo.wordCount || 0).toLocaleString() }} 字</span>
          </div>
        </div>
      </el-card>

      <!-- 关键词 -->
      <el-card 
        v-if="shouldShowItem('keywords') && extractResult.keywords && extractResult.keywords.length > 0" 
        class="keywords-card" 
        shadow="hover"
      >
        <template #header>
          <div class="card-header">
            <el-icon size="20" color="#67C23A">
              <Key />
            </el-icon>
            <span>关键词分析</span>
            <el-button
              type="text"
              size="small"
              @click="extractSingle('keywords')"
            >
              <el-icon><Refresh /></el-icon>
              重新提取
            </el-button>
          </div>
        </template>

        <div class="keywords-content">
          <div class="keyword-tags">
            <el-tag
              v-for="keyword in extractResult.keywords"
              :key="keyword.keyword"
              :type="getKeywordType(keyword.importance)"
              size="large"
            >
              {{ keyword.keyword }}
              <span class="keyword-freq">({{ keyword.frequency || 0 }})</span>
            </el-tag>
          </div>
        </div>
      </el-card>

      <!-- 摘要 -->
      <el-card 
        v-if="shouldShowItem('abstract') && extractResult.abstract && (extractResult.abstract.chineseAbstract || extractResult.abstract.englishAbstract)" 
        class="abstract-card" 
        shadow="hover"
      >
        <template #header>
          <div class="card-header">
            <el-icon size="20" color="#E6A23C">
              <Document />
            </el-icon>
            <span>摘要内容</span>
            <el-button
              type="text"
              size="small"
              @click="extractSingle('abstract')"
            >
              <el-icon><Refresh /></el-icon>
              重新提取
            </el-button>
          </div>
        </template>

        <div class="abstract-content">
          <div v-if="extractResult.abstract.chineseAbstract" class="abstract-section">
            <h4>中文摘要</h4>
            <p>{{ extractResult.abstract.chineseAbstract }}</p>
          </div>
          <div v-if="extractResult.abstract.englishAbstract" class="abstract-section">
            <h4>英文摘要</h4>
            <p>{{ extractResult.abstract.englishAbstract }}</p>
          </div>
        </div>
      </el-card>

      <!-- 参考文献 -->
      <el-card 
        v-if="shouldShowItem('references') && extractResult.references && extractResult.references.length > 0" 
        class="references-card" 
        shadow="hover"
      >
        <template #header>
          <div class="card-header">
            <el-icon size="20" color="#F56C6C">
              <Collection />
            </el-icon>
            <span>参考文献</span>
            <el-tag type="info">共 {{ extractResult.references.length }} 条</el-tag>
            <el-button
              type="text"
              size="small"
              @click="extractSingle('references')"
            >
              <el-icon><Refresh /></el-icon>
              重新提取
            </el-button>
          </div>
        </template>

        <DataTable
          :data="extractResult.references"
          :columns="referenceColumns"
          :show-pagination="true"
          :pagination="{ current: 1, size: 10, total: extractResult.references.length }"
          :show-selection="false"
          :show-index="true"
        />
        
        <!-- 参考文献统计 -->
        <div class="reference-statistics">
          <el-row :gutter="16">
            <el-col :span="6">
              <div class="stat-item">
                <span class="stat-label">期刊论文</span>
                <span class="stat-value">{{ getReferenceCountByType('journal') }}</span>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="stat-item">
                <span class="stat-label">图书专著</span>
                <span class="stat-value">{{ getReferenceCountByType('book') }}</span>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="stat-item">
                <span class="stat-label">会议论文</span>
                <span class="stat-value">{{ getReferenceCountByType('conference') }}</span>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="stat-item">
                <span class="stat-label">学位论文</span>
                <span class="stat-value">{{ getReferenceCountByType('thesis') }}</span>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-card>

      <!-- 统计信息 -->
      <el-card 
        v-if="shouldShowStatistics && extractResult.statistics" 
        class="statistics-card" 
        shadow="hover"
      >
        <template #header>
          <div class="card-header">
            <el-icon size="20" color="#909399">
              <DataBoard />
            </el-icon>
            <span>统计信息</span>
          </div>
        </template>

        <div class="statistics-grid">
          <ResultCard
            v-if="shouldShowItem('references')"
            type="info"
            title="总参考文献"
            :main-value="extractResult.statistics.totalReferences || 0"
            unit="条"
            description="文献引用数量"
          />
          <ResultCard
            type="success"
            title="章节数量"
            :main-value="extractResult.statistics.chapterCount || 0"
            unit="章"
            description="论文章节统计"
          />
          <ResultCard
            type="warning"
            title="图表数量"
            :main-value="(extractResult.statistics.figureCount || 0) + (extractResult.statistics.tableCount || 0)"
            unit="个"
            description="图片和表格总数"
          />
        </div>
      </el-card>

      <!-- 导出操作 -->
      <el-card v-if="extractResult" class="export-card" shadow="hover">
        <template #header>
          <div class="card-header">
            <el-icon size="20" color="#409EFF">
              <Download />
            </el-icon>
            <span>导出操作</span>
          </div>
        </template>

        <div class="export-actions">
          <el-button type="primary" @click="exportToExcel">
            <el-icon><Download /></el-icon>
            导出为Excel
          </el-button>
          <el-button @click="exportToWord">
            <el-icon><Document /></el-icon>
            导出为Word
          </el-button>
          <el-button @click="exportToPDF">
            <el-icon><Files /></el-icon>
            导出为PDF
          </el-button>
        </div>
      </el-card>

      <!-- 未选择任何内容的提示 -->
      <div v-if="hasNoSelectedResults" class="no-result-hint">
        <el-empty description="未选择提取内容或提取结果为空">
          <template #description>
            <p>当前选择的提取内容没有可展示的结果</p>
            <p>请检查提取配置或重新提取</p>
          </template>
          <el-button type="primary" @click="showConfigCard">
            修改提取配置
          </el-button>
        </el-empty>
      </div>
    </div>

    <!-- 上传进度显示 -->
    <div v-if="uploadProgress > 0 && uploadProgress < 100" class="progress-section">
      <el-progress 
        :percentage="uploadProgress" 
        :status="uploadProgress === 100 ? 'success' : ''"
        :show-text="true"
      />
      <p class="progress-text">文件上传中... {{ uploadProgress }}%</p>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, computed } from 'vue'
import {
  UploadFilled,
  Setting,
  InfoFilled,
  Star,
  User,
  Key,
  Document,
  Collection,
  DataBoard,
  Download,
  Files,
  Refresh
} from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { useAppStore } from '@/stores/app'
import { submitInfoExtraction, uploadPaper, extractSingleItem } from '@/api/student'
import { formatDateTime, validateFile } from '@/utils'
import FileUpload from '@/components/FileUpload.vue'
import DataTable from '@/components/DataTable.vue'
import ResultCard from '@/components/ResultCard.vue'

const appStore = useAppStore()

// 上传的文件
const uploadedFiles = ref([])
// 存储上传后的文件ID
const currentFileId = ref('')

// 提取配置
const extractConfig = reactive({
  options: ['basicInfo', 'keywords', 'abstract', 'references']
})

// 提取状态
const extracting = ref(false)
const singleExtracting = ref(false)
const extractResult = ref(null)
const uploadProgress = ref(0)

// 参考文献表格列
const referenceColumns = [
  {
    prop: 'title',
    label: '文献标题',
    minWidth: 200,
    showOverflowTooltip: true
  },
  {
    prop: 'author',
    label: '作者',
    width: 120
  },
  {
    prop: 'year',
    label: '年份',
    width: 80
  },
  {
    prop: 'type',
    label: '类型',
    width: 100,
    type: 'tag',
    tagMap: {
      book: { label: '图书', type: 'primary' },
      journal: { label: '期刊', type: 'success' },
      conference: { label: '会议', type: 'warning' },
      thesis: { label: '学位论文', type: 'info' },
      other: { label: '其他', type: 'info' }
    }
  },
  {
    prop: 'publisher',
    label: '出版社/期刊',
    minWidth: 150,
    showOverflowTooltip: true
  }
]

// 计算属性
// 计算参考文献类型统计
const getReferenceCountByType = computed(() => (type) => {
  if (!extractResult.value?.references) return 0
  return extractResult.value.references.filter(ref => ref.type === type).length
})

// 获取已选择选项的文本描述
const getSelectedOptionsText = computed(() => {
  const optionMap = {
    basicInfo: '基本信息',
    keywords: '关键词',
    abstract: '摘要',
    references: '参考文献'
  }
  return extractConfig.options.map(option => optionMap[option]).join('、')
})

// 是否显示统计信息（当选择了任意内容时显示）
const shouldShowStatistics = computed(() => {
  return extractConfig.options.length > 0 && extractResult.value?.statistics
})

// 检查是否应该显示某个项目
const shouldShowItem = (itemType) => {
  return extractConfig.options.includes(itemType)
}

// 检查是否有选中的结果
const hasNoSelectedResults = computed(() => {
  if (!extractResult.value) return false
  
  const hasBasicInfo = shouldShowItem('basicInfo') && extractResult.value.basicInfo
  const hasKeywords = shouldShowItem('keywords') && extractResult.value.keywords && extractResult.value.keywords.length > 0
  const hasAbstract = shouldShowItem('abstract') && extractResult.value.abstract && 
                     (extractResult.value.abstract.chineseAbstract || extractResult.value.abstract.englishAbstract)
  const hasReferences = shouldShowItem('references') && extractResult.value.references && extractResult.value.references.length > 0
  
  return !hasBasicInfo && !hasKeywords && !hasAbstract && !hasReferences
})

// 文件上传成功
const handleUploadSuccess = (response, file) => {
  // 保存文件ID
  if (response.data && response.data.fileId) {
    currentFileId.value = response.data.fileId
  }
  ElMessage.success('文件选择成功，请选择提取配置后点击开始提取')
}

// 开始提取
// 在原有的前端代码基础上，优化提取逻辑

// 优化开始提取函数
const startExtraction = async () => {
  if (uploadedFiles.value.length === 0) {
    ElMessage.warning('请先上传文件')
    return
  }

  if (extractConfig.options.length === 0) {
    ElMessage.warning('请选择提取内容')
    return
  }

  try {
    extracting.value = true
    extractResult.value = null
    uploadProgress.value = 10 // 立即显示进度
    
    const file = uploadedFiles.value[0]
    
    // 文件验证
    const fileToValidate = file.raw || file
    const validation = validateFile(fileToValidate, {
      maxSize: 30 * 1024 * 1024,
      allowedTypes: ['.pdf']
    })
    
    if (!validation.valid) {
      ElMessage.error(validation.message)
      extracting.value = false
      return
    }

    ElMessage.info('🚀 正在上传文件...')
    
    // 上传文件
    const formData = new FormData()
    formData.append('file', fileToValidate)
    
    // 更平滑的进度模拟
    const progressInterval = setInterval(() => {
      if (uploadProgress.value < 80) {
        uploadProgress.value += 5
      }
    }, 300)
    
    try {
      const uploadResult = await uploadPaper(formData, {
        onUploadProgress: (progressEvent) => {
          if (progressEvent.total) {
            const progress = Math.round((progressEvent.loaded * 100) / progressEvent.total)
            uploadProgress.value = Math.min(progress, 80)
          }
        }
      })
      
      clearInterval(progressInterval)
      uploadProgress.value = 85
      
      if (!uploadResult.data?.fileId) {
        throw new Error('文件上传失败，未返回文件ID')
      }
      
      currentFileId.value = uploadResult.data.fileId
      ElMessage.success('📄 文件上传成功！')
      
      // 开始信息提取
      ElMessage.info('🤖 AI正在智能分析论文内容...')
      uploadProgress.value = 90
      
      const result = await submitInfoExtraction({
        fileId: uploadResult.data.fileId,
        fileName: file.name,
        extractOptions: {
          extractBasicInfo: extractConfig.options.includes('basicInfo'),
          extractKeywords: extractConfig.options.includes('keywords'),
          extractAbstract: extractConfig.options.includes('abstract'),
          extractReferences: extractConfig.options.includes('references'),
          language: 'zh'
        }
      })
      
      uploadProgress.value = 100
      extractResult.value = result.data
      
      // 显示提取统计
      showExtractionStats(result.data)
      
      ElMessage.success('✅ 信息提取完成！')
      
      // 滚动到结果区域
      setTimeout(() => {
        const resultElement = document.querySelector('.result-section')
        if (resultElement) {
          resultElement.scrollIntoView({ behavior: 'smooth', block: 'start' })
        }
      }, 500)
      
    } catch (uploadError) {
      clearInterval(progressInterval)
      throw uploadError
    }
    
  } catch (error) {
    console.error('处理失败:', error)
    ElMessage.error(`处理失败: ${getErrorMessage(error)}`)
  } finally {
    extracting.value = false
    setTimeout(() => { uploadProgress.value = 0 }, 1000)
  }
}

// 显示提取统计信息
const showExtractionStats = (result) => {
  const stats = []
  
  if (result.basicInfo) {
    stats.push(`基本信息: ✓`)
  }
  
  if (result.keywords?.length) {
    stats.push(`关键词: ${result.keywords.length}个`)
  }
  
  if (result.abstract?.chineseAbstract || result.abstract?.englishAbstract) {
    stats.push(`摘要: ✓`)
  }
  
  if (result.references?.length) {
    stats.push(`参考文献: ${result.references.length}条`)
  }
  
  if (stats.length > 0) {
    ElMessage.success(`提取结果: ${stats.join(' | ')}`)
  }
}

// 更好的错误信息处理
const getErrorMessage = (error) => {
  if (error.response?.data?.message) {
    return error.response.data.message
  }
  if (error.message) {
    return error.message
  }
  return '网络错误，请重试'
}

// 优化单独提取函数
const extractSingle = async (itemType) => {
  if (!currentFileId.value) {
    ElMessage.warning('请先上传文件')
    return
  }

  try {
    singleExtracting.value = true
    const itemName = getItemTypeName(itemType)
    
    ElMessage.info(`🔄 正在重新提取${itemName}...`)
    
    const result = await extractSingleItem({
      fileId: currentFileId.value,
      itemType: itemType,
      fileName: uploadedFiles.value[0]?.name || 'unknown.pdf'
    })
    
    // 智能更新结果
    updateExtractionResult(itemType, result.data)
    
    ElMessage.success(`✅ ${itemName}提取完成！`)
    
  } catch (error) {
    console.error(`提取${itemType}失败:`, error)
    ElMessage.error(`提取失败: ${getErrorMessage(error)}`)
  } finally {
    singleExtracting.value = false
  }
}

// 智能更新结果
const updateExtractionResult = (itemType, newData) => {
  if (!extractResult.value) {
    extractResult.value = {}
  }
  
  switch (itemType) {
    case 'basicInfo':
      extractResult.value.basicInfo = newData.basicInfo
      break
    case 'keywords':
      extractResult.value.keywords = newData.keywords
      break
    case 'abstract':
      extractResult.value.abstract = newData.abstract
      break
    case 'references':
      extractResult.value.references = newData.references
      // 更新统计信息
      if (extractResult.value.statistics) {
        extractResult.value.statistics.totalReferences = newData.references?.length || 0
      }
      break
  }
}

// 获取项目类型名称
const getItemTypeName = (itemType) => {
  const nameMap = {
    basicInfo: '基本信息',
    keywords: '关键词',
    abstract: '摘要',
    references: '参考文献'
  }
  return nameMap[itemType] || itemType
}

// 获取关键词类型
const getKeywordType = (importance) => {
  const typeMap = {
    high: 'danger',
    medium: 'warning',
    low: 'info'
  }
  return typeMap[importance] || 'default'
}

// 显示配置卡片
const showConfigCard = () => {
  const configElement = document.querySelector('.config-card')
  if (configElement) {
    configElement.scrollIntoView({ behavior: 'smooth', block: 'start' })
  }
}

// 导出为Excel
const exportToExcel = () => {
  ElMessage.success('正在导出Excel文件...')
  // 实现Excel导出逻辑
}

// 导出为Word
const exportToWord = () => {
  ElMessage.success('正在导出Word文件...')
  // 实现Word导出逻辑
}

// 导出为PDF
const exportToPDF = () => {
  ElMessage.success('正在导出PDF文件...')
  // 实现PDF导出逻辑
}

onMounted(() => {
  appStore.setPageTitle('信息提取')
  appStore.setBreadcrumbs([
    { title: '学生中心', path: '/student' },
    { title: '信息提取', path: '/student/info-extraction' }
  ])
})
</script>

<style scoped>
.info-extraction-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px;
}

.page-header {
  margin-bottom: 24px;
  text-align: center;
}

.page-header h2 {
  margin: 0 0 8px 0;
  color: #303133;
  font-size: 24px;
  font-weight: 600;
}

.page-header p {
  margin: 0;
  color: #909399;
  font-size: 14px;
}

.card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}

.upload-card,
.config-card,
.info-card {
  margin-bottom: 24px;
  border-radius: 12px;
  border: none;
}

.feature-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 16px;
}

.feature-item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #606266;
  font-size: 14px;
}

.selection-hint {
  margin-top: 16px;
  padding: 12px;
  background: #f0f9ff;
  border-radius: 8px;
  border: 1px solid #e1f5fe;
}

.hint-content {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.hint-content span {
  color: #409EFF;
  font-weight: 500;
}

.hint-desc {
  margin: 0;
  color: #67a8e0;
  font-size: 12px;
}

.result-section {
  margin-top: 32px;
}

.basic-info-card,
.keywords-card,
.abstract-card,
.references-card,
.statistics-card,
.export-card {
  margin-bottom: 24px;
  border-radius: 12px;
  border: none;
}

.basic-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
}

.info-item {
  display: flex;
  padding: 12px;
  background: #f8f9fa;
  border-radius: 8px;
}

.info-item label {
  min-width: 100px;
  font-weight: 500;
  color: #606266;
}

.info-item span {
  color: #303133;
  word-break: break-all;
}

.keyword-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.keyword-freq {
  margin-left: 4px;
  color: #909399;
  font-size: 0.8em;
}

.abstract-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.abstract-section h4 {
  margin: 0 0 8px 0;
  color: #303133;
  font-size: 14px;
  font-weight: 600;
}

.abstract-section p {
  margin: 0;
  color: #606266;
  line-height: 1.6;
  text-align: justify;
  white-space: pre-wrap;
}

.reference-statistics {
  margin-top: 20px;
  padding: 16px;
  background: #f8f9fa;
  border-radius: 8px;
}

.stat-item {
  text-align: center;
  padding: 12px;
}

.stat-label {
  display: block;
  font-size: 12px;
  color: #909399;
  margin-bottom: 4px;
}

.stat-value {
  display: block;
  font-size: 24px;
  font-weight: 600;
  color: #409EFF;
}

.statistics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
}

.export-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.single-extract-buttons {
  margin-left: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.no-result-hint {
  text-align: center;
  padding: 40px 20px;
  background: #f8f9fa;
  border-radius: 12px;
  margin-bottom: 24px;
}

.progress-section {
  margin: 20px 0;
  text-align: center;
}

.progress-text {
  margin-top: 8px;
  color: #409EFF;
  font-size: 14px;
}

@media (max-width: 768px) {
  .basic-info-grid {
    grid-template-columns: 1fr;
  }
  
  .export-actions {
    flex-direction: column;
  }
  
  .export-actions .el-button {
    width: 100%;
  }
  
  .info-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  
  .info-item label {
    min-width: auto;
  }
  
  .single-extract-buttons {
    margin-left: 0;
    margin-top: 12px;
    width: 100%;
  }
  
  .single-extract-buttons .el-button {
    width: 100%;
    margin-bottom: 8px;
  }
  
  .selection-hint {
    padding: 8px;
  }
}
</style>